<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="light" class="pub-hearder">
        <ion-buttons slot="start">
          <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-title>
            章节练习
          </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
        <div class="main-page">
            <div class="list" v-for="(item, index) in list" :key="index" >
                <span>专项突破</span>
                <div class="title">{{ item.title }}</div>
                <div class="desc">{{ item.desc }}</div>
                <label>去练习</label>
            </div>
        </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonContent, IonTitle, IonHeader, IonToolbar, IonButtons, IonBackButton, IonFooter } from '@ionic/vue';
import { personOutline, lockClosedOutline } from 'ionicons/icons';
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { PublicService } from '@/utils/public';
const publicService = new PublicService();
export default {
  name: 'login-page',
  components: {
    IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton,  IonTitle
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    let t: any;
    const state = reactive({
      list: [
        {
            url: require('@/assets/images/yl2.png'),
            title: '乐理',
            desc: '覆盖统考校考， 培养考感',
            type: 'yl'
        },
        {
            url: require('@/assets/images/le2.png'),
            title: '练耳',
            desc: '覆盖统考校考， 听音速写',
            type: 'le'
        },
        {
            url: require('@/assets/images/yl2.png'),
            title: '视唱',
            desc: '覆盖统考校考， 听音速写',
            type: 'sc'
        },
        {
            url: require('@/assets/images/yl2.png'),
            title: '真题训练',
            desc: '历年真题，全面模拟',
            type: 'zt'
        }
      ]
    })

   


    return {
      ...toRefs(state),
    }
  }
}
</script>
<style lang="scss" scoped>
.main-page {
    padding: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    div.list{
        background: url('../../assets/images/yl2.png');
        background-size: contain;
        background-repeat: no-repeat;
        margin-bottom: 20px;
        position: relative;
        span{
            color: #143268;
            font-size: 12px;
            margin-left: 7px;
        }
        label{
            color: #143268;
            background: #fff;
            font-size: 14px;
            padding: 8px 27px;
            right: 40px;
            top: 55px;
            position: absolute;
            border-radius: 18px;
            font-weight: bold;
        }
    }
    div.list:nth-child(2){
        background: url('../../assets/images/le2.png');
        background-size: contain;
        background-repeat: no-repeat;
    }
    div.list:nth-child(3){
        background: url('../../assets/images/sc.png');
        background-size: contain;
        background-repeat: no-repeat;
    }
    div.list:nth-child(4){
        background: url('../../assets/images/zt.png');
        background-size: contain;
        background-repeat: no-repeat;
    }
    .title {
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 18px;
        color: #333333;
        margin-top: 25px;
        margin-left: 30px;
    }
    .desc {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #939699;
        margin-top: 10px;
        margin-left: 30px;
        margin-bottom: 40px;
    }
    .grad-name {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 15px;
        color: #333333;
        margin: 15px 0px 7px;
        .arc {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #ffffff;
            border: 4px solid #fff;
            border-radius: 50%;
            margin-right: 8px;
            position: relative;
            top: -3px;
        }
    }
    .child {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        div {
            background: #f3f5f7;
            border-radius: 15px;
            height: 30px;
            font-size: 12px;
            color: #333333;
            letter-spacing: 0;
            text-align: center;
            line-height: 30px;
        }
    }
    .input {
        width: 100%;
        height: 80px;
        background: #f3f5f7;
        border-radius: 30px;
        position: relative;
        image {
            width: 22px;
            height: 22px;
            position: relative;
            top: 10px;
            left:15px;
        }
        label.txt {
            position: relative;
            left: 20px;
            top: 5px;
        }
        .position {
            position: absolute;
            right: 20px;
            top: 10px;
        }
    }
}
button {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    color: #fff;
    background: #CA3032;
    margin-bottom: 10px;
    img{
      width: 20px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
</style>